Adding Drop Down Boxes

So, you have been thinking about adding a drop box for people to navigate your page with. One problem.....how is it done? Below is a sample navigation drop box. Choose a page, and click the "Go!" button. You will be taken to the page you asked for. (Both are kind of boring by the way). Give it a try below:

For this drop box to do this, we must use a javascript that will access the Select Box and then go to the new destination.

In the last section, we learned how to access the value attributes of a text box and a button. We can access the Select Box in the same way. Below is the code used for the drop down box:

<FORM name="guideform">
<SELECT name="guidelinks">
<OPTION SELECTED value="jex6.htm">Page 1
<OPTION value="jex7.htm">My Cool Page
</SELECT>
&nbsp;&nbsp;
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> </FORM>

Notice that we gave the form and the select box a name. These are used later to access the value attribute of the Select box. (If you scrolled out to read all of that, you saw it got pretty messy there). We also gave the value=" " attribute to each OPTION tag. You will notice the values are urls. The url is where we want the browser to go when the user selects that option. So, for the first option, <OPTION SELECTED value="jex6.htm">Page1, we want the browser to go to "jex6.htm" when the user chooses the option "Page 1". You can change this to any url you wish.

The tricky part here is accessing the Select Box in order for a viewer to navigate the site. You see that we can get to the select box itself easily using the name attributes:

document.guideform.guidelinks

But this doen't give us access to the options inside the select box. It only gives us access to the box itself. To access the options, we must add on the options property:

document.guideform.guidelinks.options

Now that we can get to the options, we can access each option individually using some special notation. (The options create a numbered array, if you are familiar with arrays). You don't have to know about arrays to get the idea. Just remember that the first option listed is option 0, written as options[0] . You see the square brackets? That is what tells us an array is being used. The second option in the list will be options[1]. Just remember that arrays will start with 0 instead of 1, so you will have to use options[0] to access the first option directly.

Well, now we can get to the value attribute of the first option like this:

document.guideform.guidelinks.options[0].value

The value would be "jex6.htm". This is nice, but if you want to be able to use the selected option each time so the viewer can go to the url of their chosen option, the script will need to know which option the user has selected. Since we can't just guess they will choose options[0] or options[1], we will have to find a way to access the correct one each time the user makes a new selection. This is done by using a new property, selectedIndex.

The selectedIndex property tells the script the number of the option the user selected, so that it will not always be the same. So the script will not always be stuck on options[0] or options[1], it will get the one that is selected each time.

This gives us a new problem....when we access the value of an option, we were just allowing it to be one option or another....we didn't allow it to change if another option was selected:

document.guideform.guidelinks.options[0].value

This would give us "jex6.htm" every time.....and we want the value to be changed when the user selects another option. So...we have to alter the value inside the array part of this already long string of words. The selectedIndex property will give us a number....the number of the option the user has selected. So, we will have to put the selectedIndex property inside the array brackets so that we end up with a number inside the brackets.....But this number changes each time a new option is selected. To access the value of the selectedIndex property, we again have to go through the name of the form and the name of the select box:

document.guideform.guidelinks.selectedIndex

Now, to put it all together, we put the value of the selectedIndex inside the brackets of the full value of the option:

document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value

What will happen is that you will get one of the following, depeneding on which option was selected:

document.guideform.guidelinks.options[0].value
OR
document.guideform.guidelinks.options[1].value

Of course, you can add as many options as you wish, they will just be options[2], options[3], and so on. The beauty of the selectedIndex property is that you won't have to deal with the numbers, you will just be able to add options and let the javascript take care of the rest.

You will also notice way back in the script above that we called the javascript commands with the onClick=" " command in the button tag. The button triggers the change of urls by changing the value of the window.location:

<INPUT type="button" name="go" value="Go!" onClick="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value">

That is where everything is put together to make the drop down box work. The browser goes to the url that is the value of the option the viewer selected. A little messy, but that is the way javascript is sometimes.

Well, that does it for now, try out the next section on Drop Boxes- No Button.